<template>
  <view>
    <!-- 使用自定义搜索组件 -->
    <view class="search-box">
      <stop-search @click="gotoSearch"></stop-search>
    </view>
    <view class="goods-list">
      <view class="goods-item" v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)">
        <!-- <stop-goods :goods="goods"></stop-goods> -->
        <!-- <view class="goods-item"> -->
        <!-- 顶部的盒子 -->
        <view class="goods-item-top">
          <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
        </view>
        <!-- 底部的盒子 -->
        <view class="goods-item-bottom">
          <!-- 商品的名字 -->
          <view class="goods-name">{{goods.goods_name}}</view>
          <!-- 商品描述 -->
          <view class="goods-describe">免运费</view>
          <!-- 商品的价格 -->
          <view class="goods-price">
            <text class="goods-price-icon">￥</text>
            <!-- <text class="goods-price-number">{{goods.goods_price | tofixed}}</text> -->
            <text class="goods-price-number">{{goods.goods_price}}</text>
            <text class="goods-sales-volume">{{goods.goods_sales_volume}}人购买</text>
          </view>
        </view>
        <!-- </view> -->
      </view>
    </view>
    <view class="topping-icon" v-show="showTopBtn" @click="scrollToTop">
      <image src="../../static/stop_imgs/topping.png"></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          // 查询关键词
          query: '',
          // 商品分类Id
          cid: '',
          // 页码值
          pagenum: 1,
          // 每页显示多少条数据
          pagesize: 10
        },
        // 商品列表的数据
        goodsList: [],
        // 总数量，用来实现分页
        total: 0,
        // 节流阀：是否正在请求数据
        isloading: false,
        // 默认的商品空图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        // 置顶按钮显示隐藏标志
        showTopBtn: false,
      };
    },
    // 过滤器
    // filters: {
    //   tofixed(num) {
    //     return Number(num).toFixed(2)
    //   }
    // },
    onLoad(options) {
      // 将页面参数转存到 this.queryObj 对象中
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      console.log(this.queryObj)
      // 调用获取商品列表数据的方法
      this.getGoodsList()
    },
    // 监听页面滚动事件
    onPageScroll(e) {
      if (e.scrollTop > 0) {
        this.showTopBtn = true
      } else {
        this.showTopBtn = false
      }
    },
    methods: {
      //获取商品列表数据的方法
      async getGoodsList(cb) {
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.get('/api/stop/goodsList', this.queryObj)
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数
        cb && cb()
        // 请求失败
        if (res.meta.status !== 200) return uni.$showMsg()
        // 请求成功
        console.log(res.message)
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.total = res.message.total
      },
      // 跳转到搜索页面
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/stop_search/stop_search'
        })
      },
      // 点击跳转到商品详情页面
      gotoDetail(goods) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
        })
      },
      // 点击置顶按钮回到顶部事件
      scrollToTop() {
        if(this.showTopBtn === true) {
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0
          })
        }
      },
    },
    // 监听上拉触底的事件
    onReachBottom() {
      if (this.isloading) return
      // 判断是否还有下一页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
      // 让页码值自增 +1
      this.queryObj.pagenum++
      this.getGoodsList()
    },
    // 下拉刷新的事件
    onPullDownRefresh() {
      // 重置关键数据
      this.queryObj.pagenum = 1
      this.total = 0
      this.isloading = false
      this.goodsList = []
      // 重新发起请求
      this.getGoodsList(() => uni.stopPullDownRefresh())
    }
  }
</script>

<style lang="scss">
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .search-box {
    // 设置吸顶效果
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .goods-list {
    // width: 100vh;
    display: flex;
    padding: 15px 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    // border: 1px solid blue;

    .goods-item {
      width: 48%;
      // height: 100%;
      border-radius: 20rpx;
      background-color: white;
      margin-bottom: 10px;
      padding-bottom: 10px;
      // border: 1px solid red;

      .goods-item-top {
        // border: 1px solid yellow;

        /* 设置一个合适的最小高度 */
        .goods-pic {
          // width: 100%;
          width: 100%;
          height: 345rpx;
          overflow: hidden;
          position: relative;
          border-top-left-radius: 20rpx;
          border-top-right-radius: 20rpx;
          display: block;
        }
      }

      .goods-item-bottom {
        // border: 1px solid red;
        margin: 0 6px 0 6px;

        .goods-name {
          width: 100%;
          font-size: 28rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: unset;
          margin-top: 6px;
          font-weight: bold;
        }
        .goods-describe {
          // position: absolute;
          color: #c4c4c4;
          font-weight: 500;
          // right: 0;
          // bottom: -1px;
          font-size: 9pt;
          margin-top: 3px;
        }

        .goods-price {
          position: relative;
          // padding-top: 10px;
          // border: 1px solid red;

          .goods-price-icon {
            bottom: -3px;
            position: relative;
            color: orangered;
            font-size: 10pt;
          }

          .goods-price-number {
            position: absolute;
            left: 11px;
            // bottom: 4px;
            font-size: 14pt;
            font-weight: bold;
            color: orangered;
          }

          .goods-sales-volume {
            position: absolute;
            color: #c4c4c4;
            font-weight: 500;
            right: 3px;
            bottom: -1px;
            font-size: 9pt;
          }
        }
      }
    }
  }

  .topping-icon {
    width: 38px;
    height: 38px;
    position: sticky;
    bottom: 8px;
    z-index: 999;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-right: 8px;

    image {
      width: 22px;
      height: 22px;
    }
  }
</style>